<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <style>
      .swiper-container {
        margin: auto;
        width: 1456px;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
      }

      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .swiper-slide img {
        display: block;
        width: 1456px;
        object-fit: cover;
      }
      /* 自定义分页器样式 */
      .swiper-pagination {
        position: relative;
        width: 100%;
        height: 20px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }

      .swiper-pagination-bullet {
        width: 30%;
        height: 4px;
        margin: 0 50px;
        border-radius: 2px;
        background: #ccc;
        opacity: 1;
        transition: all 0.3s ease;
      }

      .swiper-pagination-bullet-active {
        background: #007aff;
      }
      .swiper-pagination:before {
        background-color: #dcdcdc;
        right: 0;
      }
      .swiper-pagination:after {
        position: absolute;
        left: 0;
        top: 0;
        height: 2px;
        border-radius: 9999px;
      }
    </style>
  </head>

  <body>
    <div style="width: 1456px; height: 100%; margin: auto">
      <!-- Swiper -->
      <div class="swiper-container mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              src="https://img01.yzcdn.cn/upload_files/2024/06/04/Fgc87CDRTDBS0MpZe6tgcXTcbney.jpg"
              alt="#"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="https://img01.yzcdn.cn/upload_files/2024/06/01/Fok143-RH2WxBA81piMrjTRHf0G-.jpg"
              alt=""
            />
          </div>
          <div class="swiper-slide">
            <img
              src="https://img01.yzcdn.cn/upload_files/2024/06/01/FlWhKV84-hX2tJQH6MuMWALS6PZ_.jpg"
              alt=""
            />
          </div>
        </div>
      </div>
      <!-- 自定义位置的分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        loop: true,
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '"></span>';
          },
        },
        effect: "fade",
        speed: 800,
      });
    </script>
  </body>
</html>
